<template>
  <div id="app">
    <template>
      <!-- 头部区域 -->
      <div class="header">
        <a-input placeholder="请输入任务" v-model="todo" />
        <a-button type="primary" @click="addTodo">
          添加事项
        </a-button>
      </div>
      <!-- 复选列表区域 -->
      <div class="main">
        <a-list bordered :data-source="lists">
          <!-- 复选文本列表区域  -->
          <a-list-item slot="renderItem" slot-scope="item, index">
            <a-checkbox :checked="item.done" @click="changeDone(index)">
              {{ item.text }}
            </a-checkbox>
            <a-button type="link" @click="delTodo(index)">
              删除
            </a-button>
          </a-list-item>
          <!-- 底部区域 -->
          <a-list-item>
            <span>{{ lists.length }}条剩余</span>
            <a-button-group>
              <a-button :type="btnIndex === 0 ?'primary':''" @click="showAll">全部</a-button>
              <a-button :type="btnIndex === 1 ?'primary':''" @click="showUndone">未完成</a-button>
              <a-button :type="btnIndex === 2 ?'primary':''" @click="showDone">已完成</a-button>
            </a-button-group>
            <a-button type="link" @click="clearDone"> 清除已完成</a-button>
          </a-list-item>
        </a-list>
      </div>
    </template>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      todo: '',
      btnIndex: 0
    }
  },
  methods: {
    // Promise 队列
    queue (num) {
      let promise = Promise.resolve();
      num.map(v => {
        promise = promise.then(_ => { return v })
      })
    },

    // 勾选状态 改变的 功能
    changeDone (index) {
      this.$store.commit('changeDone', index)
    },
    // 添加事件 按钮 的事件
    addTodo () {
      // 1. 添加 todo 任务 到数据库
      // 2. 读取数据库信息 显示到前端
      // Promise.all([
      //   this.$store.dispatch('addTodo', this.todo),
      //   this.$store.dispatch('getList')
      // ]).then(res => { this.todo = '' })
      this.queue([this.$store.dispatch('addTodo', this.todo), this.$store.dispatch('getList')])
    },
    // 删除 按钮 的事件
    delTodo (index) {
      // await this.$store.dispatch('delTodo', index)
      // await this.$store.dispatch('getList')
      this.queue([this.$store.dispatch('delTodo', index), this.$store.dispatch('getList')])
    },
    // 清除已完成 的事件
    clearDone () {
      this.queue([this.$store.dispatch('refreshLists'),
      this.$store.dispatch('clearDone'),
      this.$store.dispatch('getList')])
    },
    // 展示 未完成的任务 的事件
    showUndone () {
      this.queue([this.$store.dispatch('refreshLists'),
      this.$store.dispatch('showUndone')])
      this.btnIndex = 1
    },
    // 展示 所有任务 的事件
    showAll () {
      this.btnIndex = 0
    },
    // 展示 已完成任务 的事件
    showDone () {
      this.queue([this.$store.dispatch('refreshLists'),
      this.$store.dispatch('showDone')])
      this.btnIndex = 2
    }
  },
  computed: {
    lists () {
      if (this.btnIndex === 0) {
        return this.$store.state.lists
      } else if (this.btnIndex === 1) {
        return this.$store.state.undoneLists
      } else {
        return this.$store.state.doneLists
      }
    }
  },
  created: function() {
    // 在页面显示的时候 渲染 列表信息
    this.$store.dispatch('getList')
  }
}
</script>

<style>
body,
html {
  padding: 10px;
  box-sizing: border-box;
  width: 100vw;
  height: 100vh;
}
.header {
  margin-bottom: 20px;
}
.header .ant-input {
  width: 500px;
  margin-right: 15px;
}
.main .ant-list {
  width: 500px;
}
</style>
